<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="DESCRIPTION">
    <meta name="keywords" content="KEYWORDS">
    <meta name="author" content="AUTHOR NAME">

    <!-- TITLE -->
    <title>Multimax - Multipurpose One page</title>

    <!-- FAVICON -->
    <link href="../static/img/favicon.ico" rel="icon">

    <!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <!-- FONT-AWESOME -->
    <link rel="stylesheet" href="../static/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <!-- MAGNIFIC POPUP CORE CSS -->
    <link href="../static/css/magnific-popup.css" rel="stylesheet">

    <!-- OWL CAROUSEL -->
    <link href="../static/css/owl.carousel.min.css" rel="stylesheet">
    <link href="../static/css/owl.theme.default.min.css" rel="stylesheet">

    <!--Style CSS file-->
    <link rel=" stylesheet" href="../static/css/style.css">

</head>

<body>

    <!-- ====== Preloader ======  -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <!-- ======End Preloader ======  -->

    <!-- ======START NAVGITION ======  -->
    <nav class="navbar navbar-expand-lg">
        <!-- logo -->
        <a class="navbar-brand" href="#home">
            <img src="../static/img/logo.png" alt="header-Logo" class="logo"></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText">
            <span class="icon-bar"><i class="fa fa-bars fa-2x"></i></span>
        </button>
        <!--End of Resposive Toggle icon-->

        <div class="collapse navbar-collapse" id="navbarText">
            <!--Main menu navigation list-->
            <ul class="navbar-nav ml-auto line">
                <li class="nav-item">
                    <a class="nav-link" href="#home" data-scroll-nav="0">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" data-scroll-nav="1">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services" data-scroll-nav="2">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio" data-scroll-nav="3">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#team" data-scroll-nav="4">Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#price" data-scroll-nav="5">Price</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#blog" data-scroll-nav="6">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact" data-scroll-nav="7">Contact</a>
                </li>
            </ul>
            <!--End of Main menu navigation list-->
        </div>
        <!--End of resposive collapse class-->
    </nav>
    <!-- ====== END NAVGITION ======  -->

    <!-- =======START HEADER=========== -->
    <header class="home" id="home" data-scroll-index="0">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 home-content mt-md-5 mt-sm-5">
                    <h1 class="heading-primary mb-3">
                        Multimax Creative Agency
                    </h1>
                    <p class="mb-5">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque vel aut animi quam ducimus
                        consequatur voluptas delectus, sapiente.</p>

                    <a href="#0" class="button btn-hover mt-5">Get Started &rarr;</a>
                </div>

                <!-- ====== START SLIDESHOW ======  -->
                <div class="col-lg-6 order-first order-lg-last">
                    <div id="carousel-img" class="owl-carousel owl-theme">
                        <div class="item"><img src="../static/img/home-01.png" alt="home-picture-01" /></div>
                        <div class="item"><img src="../static/img/home-02.png" alt="home-picture-02" /></div>
                        <div class="item"><img src="../static/img/home-03.png" alt="home-picture-03" /></div>
                        <div class="item"><img src="../static/img/home-04.png" alt="home-picture-04" /></div>
                    </div>
                </div>
            </div>
            <!-- ====== END SLIDESHOW ======  -->
        </div>

    </header>
    <!-- ====== END HEADER ======  -->

    <!-- Scroll to Top -->
    <div id="scroll-to-top"><i class="fa fa-arrow-up fa-fw"></i></div>

    <!-- ====== START ABOUT ======  -->
    <section class="about padding" id="about" data-scroll-index="1">
        <div class="container">
            <div class="row">

                <!-- START ABOUT PICTURE -->
                <div class="col-lg-6 mt-lg-5">
                    <img src="../static/img/about.png" alt="about-picture" />
                </div>
                <!-- END ABOUT PICTURE -->

                <!-- START ABOUT CONTENT -->
                <div class="col-lg-6 mt-md-5 mt-sm-5 about-content">
                    <div class="hr-title">
                        <h2 class="heading-primary mb-2">
                            About Us
                        </h2>
                        <div class="headerhr"></div>
                    </div>
                    <h3 class="heading-tertiary mt-3 mb-3">
                        Become best of you
                    </h3>
                    <p class="mb-3">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque vel aut animi quam ducimus
                        consequatur voluptas delectus, sapiente, explicabo nam quasi! Corporis ipsum quae repellendus
                        molestias a quaerat recusandae similique!</p>
                    <p class="mb-5">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius exercitationem suscipit ex quasi
                        in iure dolorem cupiditate corrupti ducimus ipsa.
                    </p>
                    <a href="#0" class="button btn-hover mt-3">Read More &rarr;</a>
                </div>
                <!-- END ABOUT CONTENT -->

            </div>
        </div>
    </section>
    <!-- ====== END ABOUT======  -->

    <!-- ======  START ABOUT LIST====== -->
    <section class="about-list padding">
        <div class="container">
            <div class="row">

                <!-- START ABOUT LIST SECTION TITLE -->
                <div class="text-center">
                    <h2 class="heading-primary mb-5">Our <span>Creative</span></h2>
                    <p class="mb-3">Lorem Ipsum is simply dummy text of the printing and type setting
                        industry when an unknown printer took a galley of type and scrambled it to make a type specimen
                        book It has survived not only five centuries.</p>
                </div>
                <!-- END ABOUT LIST SECTION TITLE -->

                <!-- START ABOUT ITEM -->
                <div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="text-center">
                        <i class="icon fa fa-paint-brush fa-2x"></i>
                        <h5>Web Design</h5>
                        <h6>Modern & Clean Design</h6>
                        <p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
                    </div>
                </div>
                <!-- END ABOUT ITEM -->

                <!-- START ABOUT ITEM -->
                <div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="text-center">
                        <i class="icon fa fa-desktop fa-2x"></i>
                        <h5>Development</h5>
                        <h6>Web & Mobile Development</h6>
                        <p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
                    </div>
                </div>
                <!-- END ABOUT ITEM -->

                <!-- START ABOUT ITEM -->
                <div class="about-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="text-center">
                        <i class="icon fa fa-diamond fa-2x"></i>
                        <h5>Branding</h5>
                        <h6>Logo Design</h6>
                        <p>Lorem Ipsum is simply dummy text of the printing and type setting industry</p>
                    </div>
                </div>
                <!-- END ABOUT ITEM -->

            </div>
        </div>
    </section>
    <!-- ======  END OF ABOUT LIST====== -->

    <!-- ====== START SKILLS ======  -->
    <section class="skills padding">
        <div class="container">
            <div class="row">

                <!-- START SKILLS LEFT SIDE -->
                <div class="col-lg-5 mx-auto skills-left">
                    <h2 class="heading-primary mb-5">Our <span>Skills</span></h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ipsam ullam incidunt itaque
                        nemo omnis temporibus totam quibusdam repellat vero, recusandae excepturi dignissimos velit et
                        alias amet, quia facilis perferendis,consectetur adipisicing elit. Aliquam ipsam ullam incidunt
                        itaque nemo omnis.</p>
                </div>
                <!-- END SKILLS LEFT SIDE -->


                <!-- START SKILLS RIGHT SIDE -->
                <div class="col-lg-7 mx-auto skills-right">
                    <div class="content">
                        <div class="skill">

                            <!-- HTML // CSS3 -->
                            <div class="progress-item">
                                <h6>Html // Css3</h6>
                                <div class="skills-progress">
                                    <span data-value="95%"></span>
                                </div>
                            </div>

                            <!-- JQUERY //JAVA SCRIPT -->
                            <div class="progress-item">
                                <h6>Jquery // Java Script</h6>
                                <div class="skills-progress">
                                    <span data-value="80%"></span>
                                </div>
                            </div>

                            <!-- WORDPRESS -->
                            <div class="progress-item">
                                <h6>Wordpress</h6>
                                <div class="skills-progress">
                                    <span data-value="75%"></span>
                                </div>
                            </div>

                            <!-- BOOTSTRAP -->
                            <div class="progress-item">
                                <h6>Bootstrap</h6>
                                <div class="skills-progress">
                                    <span data-value="92%"></span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END SKILLS RIGHT SIDE -->

            </div>
        </div>
    </section>
    <!-- ====== END SKILLS ======  -->

    <!-- ====== START SERVICES ======  -->
    <section class="services padding" id="services" data-scroll-index="2">
        <div class="container">

            <!-- START SERVICES SECTION TITLE -->
            <h2 class="heading-primary text-center mb-5">Our Services</h2>
            <!-- END SERVICES SECTION TITLE -->

            <div class="row">
                <!-- START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">
                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-pencil-square-o fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Designs & interfaces</h5>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                            Aenean massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

                <!--START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">

                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-cog fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Highly customizable</h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, sequi cupiditate! Nobis
                            corporis exercitationem obcaecati magni rerum explicabo vel nemo.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

                <!--START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">
                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-desktop fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Responsive design</h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam laudantium veritatis
                            porro obcaecati, reiciendis.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

                <!--START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">
                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-lightbulb-o fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Features & plugins</h5>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatem atque, hic ut
                            necessitatibus nesciunt ullam officia.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

                <!--START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">
                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-clock-o fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Optimised for speed</h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit inventore fugiat rerum enim,
                            quibusdam mollitia laborum magnam nobis sed.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

                <!--START CONTENT BOX -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="content-box">
                        <div class="hr-title">
                            <div class="outer-circle">
                                <div class="inner-circle">
                                    <div class="content-box-icon">
                                        <i class="fa fa-comment-o fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="headerhr"></div>
                        </div>
                        <h5 class="heading-secondary">Dedicated support</h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro exercitationem vel dolores
                            harum inventore vitae nam dolor. Molestiae earum repellendus architecto corporis.
                        </p>
                    </div>
                </div>
                <!--END CONTENT BOX -->

            </div>
        </div>
    </section>
    <!-- ====== END SERVICES ======  -->

    <!-- ====== START COUNTS ======  -->
    <section class="counts padding">
        <div class="container">

            <!-- START COUNTS CONTENT -->
            <div class="counts-c text-center">

                <div class="row">
                    <!-- START COUNTS ITEM -->
                    <div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
                        <div class="counter">
                            <div class="counting-icon">
                                <i class="fa fa-code fa-2x"></i>
                            </div>
                            <!-- NUMBER -->
                            <span class="count" data-from="0" data-to="300">0</span>
                            <!-- TITLE -->
                            <h4>Our Customers</h4>
                        </div>
                    </div>
                    <!-- END COUNTS ITEM -->

                    <!-- START COUNTS ITEM -->
                    <div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
                        <div class="counter">
                            <div class="counting-icon">
                                <i class="fa fa-coffee fa-2x"></i>
                            </div>
                            <!-- NUMBER -->
                            <span class="count" data-from="0" data-to="150">0</span>
                            <!-- TITLE -->
                            <h4>happy clients</h4>
                        </div>
                    </div>
                    <!-- END COUNTS ITEM -->

                    <!-- START COUNTS ITEM -->
                    <div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
                        <div class="counter">
                            <div class="counting-icon">
                                <i class="fa fa-lightbulb-o fa-2x"></i>
                            </div>
                            <!-- NUMBER -->
                            <span class="count" data-from="0" data-to="115">0</span>
                            <!-- TITLE -->
                            <h4>Project Completed</h4>
                        </div>
                    </div>
                    <!-- END COUNTS ITEM -->

                    <!-- START COUNTS ITEM -->
                    <div class="count-item col-lg-3 col-md-6 col-sm-6 mx-auto">
                        <div class="counter">
                            <div class="counting-icon">
                                <i class="fa fa-trophy fa-2x"></i>
                            </div>
                            <!-- NUMBER -->
                            <span class="count" data-from="0" data-to="20">0</span>
                            <!-- TITLE -->
                            <h4>Awards</h4>
                        </div>
                    </div>
                    <!-- END COUNTS ITEM -->

                </div>
            </div>
            <!-- END COUNTS CONTENT -->

        </div>
        </div>
    </section>
    <!-- ====== END COUNTS ======  -->

    <!-- ====== START PORTFOLIO ======  -->
    <section class="portfolio padding" id="portfolio" data-scroll-index="3">
        <div class="container-fluid">

            <!-- START PORTFOLIO SECTION TITLE -->
            <div class="port-title text-center text-white">
                <h2 class="heading-primary mb-5">Portfolio</h2>
                <p class="text-white mb-5">Lorem Ipsum is simply dummy text of the printing and type setting
                    industry when an unknown printer took a galley of type and scrambled it to make a type specimen
                    book It has survived not only five centuries.</p>
            </div>
            <!-- END PORTFOLIO SECTION TITLE -->


            <!--START PORTFOLIO FILTER BUTTONS -->
            <nav>
                <ul class="simplefilter filter-port">
                    <li class="btn active button btn-hover" data-filter="all">All</li>
                    <li class="btn button btn-hover" data-filter="1">Brand</li>
                    <li class="btn button btn-hover" data-filter="2">Design</li>
                    <li class="btn button btn-hover" data-filter="3">Graphic</li>
                </ul>
            </nav>
            <!-- END PORTFOLIO FILTER BUTTONS -->

            <div class="row">
                <!--START PORTFOLIO CONTENT -->
                <div class="filtr-container">

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-01.jpg" alt="portfolio-01" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-01.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="3">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-02.jpg" alt="portfolio-02" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-02.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-03.jpg" alt="portfolio-03" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-03.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="2">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-04.jpg" alt="portfolio-04" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-04.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="3">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-05.jpg" alt="portfolio-05" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-05.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PORTFOLIO FILTER ITEM-->
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 filtr-item" data-category="1">
                        <div class="port-caption">
                            <!-- PORTFOLIO IMAGE -->
                            <img src="../static/img/portfolio/portfolio-06.jpg" alt="portfolio-06" />
                            <!-- PORTFOLIO TITLE -->
                            <div class="overlay">
                                <div class="info-content">
                                    <h4>Creative Portfolio</h4>
                                    <p>Branding &#8739; Logo</p>
                                </div>
                                <div class="view-more">
                                    <a class="modal-image" href="../static/img/portfolio/portfolio-06.jpg">
                                        <i class="fa fa-search fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--END PORTFOLIO CONTENT -->
            </div>
        </div>
    </section>
    <!-- ====== END PORTFOLIO ======  -->

    <!-- ====== START TEAM======  -->
    <section class="team padding" id="team" data-scroll-index="4">
        <div class="container">

            <!-- START TEAM SECTION TITLE -->
            <div class="text-center">
                <h2 class="heading-primary mb-5">Our Team </h2>
                <p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam magnam nihil dolores
                    maxime aspernatur saepe.</p>
            </div>
            <!-- END TEAM SECTION TITLE -->

            <div class="row mt-30">
                <!-- START TEAM INFO -->
                <div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
                    <div class="team-info">
                        <img src="../static/img/team/team-01.jpg" alt="team-photo" />
                        <div class="view-content">
                            <h3 class="title">Alex Smith</h3>
                            <span class="post">UI/UX Designer</span>
                            <ul class="icon">
                                <li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END TEAM INFO -->

                <!-- START TEAM INFO -->
                <div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
                    <div class="team-info">
                        <img src="../static/img/team/team-02.jpg" alt="team-photo" />
                        <div class="view-content">
                            <h3 class="title">Sophia</h3>
                            <span class="post">Web Designer</span>
                            <ul class="icon">
                                <li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END TEAM INFO -->

                <!-- START TEAM INFO -->
                <div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
                    <div class="team-info">
                        <img src="../static/img/team/team-03.jpg" alt="team-photo" />
                        <div class="view-content">
                            <h3 class="title">James Smith</h3>
                            <span class="post">Web Developer</span>
                            <ul class="icon">
                                <li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END TEAM INFO -->

                <!-- START TEAM INFO -->
                <div class="col-md-6 col-lg-3 col-sm-6 mx-auto">
                    <div class="team-info">
                        <img src="../static/img/team/team-04.jpg" alt="team-photo" />
                        <div class="view-content">
                            <h3 class="title">Emily</h3>
                            <span class="post">Coordinator</span>
                            <ul class="icon">
                                <li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
                                <li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END TEAM INFO -->

            </div>
        </div>
    </section>
    <!-- ====== END TEAM ======  -->

    <!-- ====== START GET READY ====== -->
    <section class="ready padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 cta">
                    <div class="text-center">
                        <h2 class="heading-primary mb-3">Want to work with us?</h2>
                        <h5 class="heading-tertiary mb-5">Tell us about your project</h5>
                        <a href="#0" class="button btn-hover">
                            <span>Get Started</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== END GET READY ====== -->

    <!-- ====== START PRICES ======  -->
    <section class="price padding" id="price" data-scroll-index="5">
        <div class="container">

            <!-- START PRICE SECTION TITLE -->
            <div class="text-center">
                <h2 class="heading-primary mb-5">Pricing Table</h2>
                <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid nisi soluta, maxime
                    doloribus numquam autem adipisci. Id, nisi! Quo, sequi aut? Nulla excepturi iure sit.</p>
            </div>
            <!-- END PRICE SECTION TITLE -->

            <!-- START PRICE TABLE -->
            <div class="pricing-tables text-center">
                <div class="row">

                    <!-- START PRICE LIST -->
                    <div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
                        <div class="item mb-md50">
                            <div class="type">
                                <h4>Free</h4>
                            </div>

                            <div class="value">
                                <h3><span>$</span>0</h3>
                                <span class="per">/ Month</span>
                            </div>

                            <div class="features">
                                <ul>
                                    <li>2 GB Disk Space</li>
                                    <li>1 Domain Names</li>
                                    <li>2 Email Address</li>
                                    <li>Enhanced Security</li>
                                    <li>Unlimited Support</li>
                                </ul>
                            </div>

                            <div class="order">
                                <a href="#0" class="button btn-hover">
                                    <span>Order Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- END PRICE LIST -->

                    <!-- START PRICE LIST -->
                    <div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
                        <div class="item mb-md50">
                            <div class="type">
                                <h4>Basic</h4>
                            </div>

                            <div class="value">
                                <h3><span>$</span>10</h3>
                                <span class="per">/ Month</span>
                            </div>

                            <div class="features">
                                <ul>
                                    <li>8 GB Disk Space</li>
                                    <li>10 Domain Names</li>
                                    <li>4 Email Address</li>
                                    <li>Enhanced Security</li>
                                    <li>Unlimited Support</li>
                                </ul>
                            </div>

                            <div class="order">
                                <a href="#0" class="button btn-hover">
                                    <span>Order Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- END PRICE LIST -->

                    <!-- START PRICE LIST -->
                    <div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
                        <div class="item active mb-md50">

                            <div class="type">
                                <h4>Standard</h4>
                            </div>

                            <div class="value">
                                <h3><span>$</span>30</h3>
                                <span class="per">/ Month</span>
                            </div>

                            <div class="features">
                                <ul>
                                    <li>20 GB Disk Space</li>
                                    <li>15 Domain Names</li>
                                    <li>10 Email Address</li>
                                    <li>Enhanced Security</li>
                                    <li>Unlimited Support</li>
                                </ul>
                            </div>

                            <div class="order">
                                <a href="#0" class="button btn-hover">
                                    <span>Order Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- END PRICE LIST -->

                    <!-- START PRICE LIST -->
                    <div class="col-lg-3 col-md-6 col-sm-10 mx-auto">
                        <div class="item">
                            <div class="type">
                                <h4>Premium</h4>
                            </div>

                            <div class="value">
                                <h3><span>$</span>80</h3>
                                <span class="per">/ Month</span>
                            </div>

                            <div class="features">
                                <ul>
                                    <li>50 GB Disk Space</li>
                                    <li>30 Domain Names</li>
                                    <li>20 Email Address</li>
                                    <li>Enhanced Security</li>
                                    <li>Unlimited Support</li>
                                </ul>
                            </div>

                            <div class="order">
                                <a href="#0" class="button btn-hover">
                                    <span>Order Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- END PRICE LIST -->

                </div>
            </div>
            <!-- END PRICE TABLE -->

        </div>
        </div>
    </section>
    <!-- ====== END PRICES ======  -->

    <!-- ====== START PROCESS ======  -->
    <section class="process padding">
        <div class="container">

            <!-- START PROCESS SECTION TITLE -->
            <div class="row">
                <div class="text-center col-lg-12">
                    <h2 class="heading-primary mb-5">Work Process</h2>
                    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, numquam aut tenetur
                        fugiat cumque nostrum adipisci.</p>
                </div>
            </div>
            <!-- END PROCESS SECTION TITLE -->

            <!-- START PROCESS LIST -->
            <div class="row">
                <div class="col-lg-3 col-md-6 mx-auto">
                    <div class="p-list mb-md50">
                        <span class="icon"><i class="fa fa-lightbulb-o"></i></span>
                        <h6>Creative Ideas</h6>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                    </div>
                </div>
                <!-- END PROCESS LIST -->

                <!-- START PROCESS LIST -->
                <div class="col-lg-3 col-md-6 mx-auto">
                    <div class="p-list mb-md50">
                        <span class="icon"><i class="fa fa-pencil-square-o"></i> </span>
                        <h6>Planning & Organization</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
                <!-- END PROCESS LIST -->

                <!-- START PROCESS LIST -->
                <div class="col-lg-3 col-md-6 mx-auto">
                    <div class="p-list mb-sm50">
                        <span class="icon"><i class="fa fa-database"></i></span>
                        <h6>Development</h6>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
                <!-- END PROCESS LIST -->

                <!-- START PROCESS LIST -->
                <div class="col-lg-3 col-md-6 mx-auto">
                    <div class="p-list">
                        <span class="icon"><i class="fa fa-sitemap"></i></span>
                        <h6>Testing</h6>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
                <!-- END PROCESS LIST -->
            </div>
        </div>
    </section>
    <!-- ====== END PROCESS ======  -->

    <!-- ====== START TESTIMONIALS======  -->
    <section class="test padding">
        <div class="container">
            <div class="row">
                <div class=" offset-md-2 col-md-8 col-1g-12 offset-md-2 mx-auto">
                    <div class="testimonials text-center">
                        <div class="owl-carousel owl-theme">

                            <!-- START TESTIMONIAL -->
                            <div class="testimo">
                                <div class="client-area">
                                    <div class="../static/img">
                                        <div class="author">
                                            <img src="../static/img/team/team-01.jpg" alt="testimonial-picture" />
                                        </div>
                                    </div>
                                    <h6>Alex Smith</h6>
                                    <span>Envato Customer</span>
                                </div>
                                <p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
                                    assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
                                    excepturi. "</p>
                            </div>
                            <!-- END TESTIMONIAL -->

                            <!-- START TESTIMONIAL -->
                            <div class="testimo">
                                <div class="client-area">
                                    <div class="../static/img">
                                        <div class="author">
                                            <img src="../static/img/team/team-02.jpg" alt="testimonial-picture" />
                                        </div>
                                    </div>
                                    <h6>Sophia</h6>
                                    <span>Envato Customer</span>
                                </div>
                                <p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
                                    assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
                                    excepturi. "</p>
                            </div>
                            <!-- END TESTIMONIAL -->

                            <!-- START TESTIMONIAL -->
                            <div class="testimo">
                                <div class="client-area">
                                    <div class="../static/img">
                                        <div class="author">
                                            <img src="../static/img/team/team-03.jpg" alt="testimonial-picture" />
                                        </div>
                                    </div>
                                    <h6>James Smith</h6>
                                    <span>Envato Customer</span>
                                </div>
                                <p>" Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nobis
                                    assumenda nulla ullam ad quibusdam voluptatum, exercitationem autem sequi
                                    excepturi. "</p>
                            </div>
                            <!-- END TESTIMONIAL -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== END TESTIMONIALS======  -->

    <!-- ====== START BLOG ======  -->
    <section class="blog padding" id="blog" data-scroll-index="6">
        <div class="container">
            <div class="row">

                <!-- START BLOG SECTION TITLE -->
                <div class="text-center">
                    <h2 class="heading-primary mb-5">Our Blog</h2>
                    <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur,
                        dolores! Iure perspiciatis, minus modi ratione est maiores. Perferendis, porro aperiam.</p>
                </div>
                <!-- END BLOG SECTION TITLE -->

                <!-- BLOG ITEM -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="blog-img">
                        <div class="post-date">
                            <span class="date">10</span>
                            <span class="month">jan</span>
                        </div>
                        <img src="../static/img/hero-03.jpg" alt="blog-image" />
                    </div>
                    <div class="blog-item">
                        <div class="post-title">
                            <a href="#0">
                                <h3>5 Best Responsive Web Design Practices</h3>
                            </a>
                        </div>
                        <div class="post-content">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit minima placeat aut
                                obcaecati iusto qui.
                            </p>
                            <a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
                        </div>
                        <div class="headerhr mt-4"></div>
                        <div class="post-meta">
                            <ul>
                                <li>
                                    <i class="fa fa-tags"></i>
                                    <span>Web Design</span>
                                </li>
                                <li>
                                    <i class="fa fa-book"></i>
                                    <span>8 mins read</span>
                                </li>
                                <li>
                                    <i class="fa fa-comment"></i>
                                    <a href="#0">5</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END BLOG ITEM -->

                <!-- BLOG ITEM -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="blog-img">
                        <div class="post-date">
                            <span class="date">23</span>
                            <span class="month">aug</span>
                        </div>
                        <img src="../static/img/hero-04.jpg" alt="blog-image" />
                    </div>
                    <div class="blog-item">

                        <div class="post-title">
                            <a href="#0">
                                <h3> The Most Important Rule in UX Design </h3>
                            </a>
                        </div>
                        <div class="post-content">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maxime in consectetur.
                            </p>
                            <a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
                        </div>
                        <div class="headerhr mt-4"></div>
                        <div class="post-meta">
                            <ul>
                                <li>
                                    <i class="fa fa-tags"></i>
                                    <span>User Experience</span>
                                </li>
                                <li>
                                    <i class="fa fa-book"></i>
                                    <span>5 mins read</span>
                                </li>
                                <li>
                                    <i class="fa fa-comment"></i>
                                    <a href="#0">7</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END BLOG ITEM -->

                <!-- BLOG ITEM -->
                <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
                    <div class="blog-img">
                        <div class="post-date">
                            <span class="date">12</span>
                            <span class="month">mar</span>
                        </div>
                        <img src="../static/img/hero-01.jpg" alt="blog-image" />
                    </div>
                    <div class="blog-item">

                        <div class="post-title">
                            <a href="#0">
                                <h3>5 Business Trends Set to Rule the Industry</h3>
                            </a>
                        </div>
                        <div class="post-content">
                            <p>
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi repudiandae itaque
                                enim architecto.
                            </p>
                            <a href="#0" class="button">Read More<i class="fa fa-long-arrow-right"></i></a>
                        </div>
                        <div class="headerhr mt-4"></div>
                        <div class="post-meta">
                            <ul>
                                <li>
                                    <i class="fa fa-tags"></i>
                                    <span>Business & Tech</span>
                                </li>
                                <li>
                                    <i class="fa fa-book"></i>
                                    <span>9 mins read</span>
                                </li>
                                <li>
                                    <i class="fa fa-comment"></i>
                                    <a href="#0">5</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END BLOG ITEM -->

            </div>
        </div>
    </section>
    <!-- ====== END BLOG ======  -->

    <!-- ====== START CLIENTS ======  -->
    <div class="clients text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 owl-carousel owl-theme">
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/client-logo.png" alt="logo-image"></a>
                    </div>
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/creative-logo.png" alt="logo-image"></a>
                    </div>
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/client-logo.png" alt="logo-image"></a>
                    </div>
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/creative-logo.png" alt="logo-image"></a>
                    </div>
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/client-logo.png" alt="logo-image"></a>
                    </div>
                    <div class="client-logo">
                        <a href="#0"><img src="../static/img/creative-logo.png" alt="logo-image"></a>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- ======== END CLIENTS ====== -->

    <!-- ====== START CONTACT ======  -->
    <section class="contact padding" id="contact" data-scroll-index="7">
        <div class="container">

            <!-- START CONTACT SECTION TITLE -->
            <div class="text-center">
                <h2 class="heading-primary mb-5"><span> Get In <span>Touch</span></h2>
                <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
                    aperiam consectetur rem odit in natus.</p>
            </div>
            <!-- END CONTACT SECTION TITLE -->

            <!-- START INFO-->
            <div class="row">
                <div class="col-lg-5 mx-auto">
                    <ul class="info">
                        <li>
                            <i class="fa fa-map fa-fw"></i>
                            <h5><span>Address:</span></h5>
                            <p>2885 Walt Nuzum Farm Road, New York</p>
                        </li>
                        <li>
                            <i class="fa fa-phone fa-fw"></i>
                            <h5><span>Mobile:</span></h5>
                            <p>+516-892-6997, +585-457-5267</p>
                        </li>
                        <li>
                            <i class="fa fa-envelope fa-fw"></i>
                            <h5><span>Email:</span></h5>
                            <p>company@email.com</p>
                        </li>
                        <li>
                            <i class="fa fa-refresh fa-fw"></i>
                            <h5><span>Timing:</span></h5>
                            <p>Mon-Fri - 9:00 AM to 5:00 PM</p>
                        </li>
                    </ul>
                </div>
                <!-- END INFO -->

                <!-- START CONTACT FORM -->
                <div class="contact-form col-lg-7 mx-auto">
                    <form class="form" id="contact-form" method="post" action="contact.php">
                        <div class="messages"></div>
                        <div class="controls">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input id="form_name" type="text" name="name" placeholder="Name *"
                                            required="required">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input id="form_email" type="email" name="email" placeholder="Email *"
                                            required="required">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input id="form_subject" type="text" name="subject" placeholder="Subject">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <textarea id="form_message" name="message" placeholder="Message" rows="4"
                                            required="required"></textarea>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <button type="submit" class="button btn-hover">Send Message</button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
                <!-- END CONTACT FORM -->

            </div>
        </div>
    </section>
    <!-- ====== END CONTACT ======  -->

    <!-- ====== START MAP ======  -->
    <!--Google map-->
    <div id="map"><iframe src="https://www.amap.com/" width="100%" height="100%" frameborder="0" style="border:0"
            sandbox=""></iframe></div>
    <!-- ====== END MAP ======  -->

    <!-- ====== START FOOTER ======  -->
    <section class="footer">
        <div class="container">
            <div class="row">
                <!-- START MULTIMAX -->
                <div class="col-lg-4 col-md-6 mb-sm-5 mb-3">
                    <h3 class="heading-tertiary mb-3">Multimax</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quos ipsa, soluta eum itaque nobis
                        quas sunt suscipit aliquid.</p>
                </div>
                <!-- END MULTIMAX -->

                <!-- START QUICK LINKS -->
                <div class="col-lg-2 col-md-6 mb-sm-5 mb-3">
                    <h3 class="heading-tertiary mb-3">Quick Links</h3>
                    <ul>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Blog</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">About Us</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Our story</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Forum</a>
                        </li>
                    </ul>
                </div>
                <!-- END QUICK LINKS -->

                <!-- START SUPPORT -->
                <div class="col-lg-2 col-md-6 mb-sm-5 mb-3">
                    <h3 class="heading-tertiary mb-3">Support</h3>
                    <ul>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">FAQ'S</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Privacy</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Policy</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Support</a>
                        </li>
                        <li><i class="fa fa-angle-double-right"></i>
                            <a href="#0">Documetation</a>
                        </li>
                    </ul>
                </div>
                <!-- END SUPPORT -->

                <!-- START NEWSLETTER -->
                <div class="col-lg-4 col-md-6 mb-sm-5 mb-3">
                    <h3 class="heading-tertiary mb-3">Subscribe to our Newsletter</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Id nobis
                        quas sunt suscipit aliquid.</p>
                    <form class="form mt-3">
                        <div class="form-check mb-3"> <label class="form-check-label"> <input type="checkbox"
                                    name="checkbox">
                                <small>Yes, I would like to receive communications by email.
                                </small></label>
                        </div>
                        <div class="input-group">
                            <input name="email" type="email" class="form-control" placeholder="Enter your email"
                                required>
                            <button class="btn" type="submit"><i class="fa fa-paper-plane"></i></button>
                        </div>
                    </form>
                </div>
                <!-- END NEWSLETTER -->

                <hr class="clearfix w-100 color-dark">

                <!-- START FOOTER BOTTOM -->
                <div class="offset-md-3 col-md-6 offset-md-3">

                    <!-- START SOCIAL ICONS -->
                    <div class="social-links">
                        <ul>
                            <li><a href="#0"><i class="fa fa-facebook fa-fw"></i></a></li>
                            <li><a href="#0"><i class="fa fa-twitter fa-fw"></i></a></li>
                            <li><a href="#0"><i class="fa fa-linkedin fa-fw"></i></a></li>
                            <li><a href="#0"><i class="fa fa-pinterest-p fa-fw"></i></a></li>
                            <li><a href="#0"><i class="fa fa-instagram fa-fw"></i></a></li>
                        </ul>
                    </div>
                    <!-- END SOCIAL ICONS -->

                    <!-- START RIGHTS -->
                    <div class="copyright">
                        <h5> &copy; Your Company Name 2019 | All Rights Reserved. <a target="_blank"
                                href="http://www.mobanwang.com/" title="模板王">模板王</a></h5>
                    </div>
                    <!-- END RIGHTS -->
                </div>
                <!-- END FOOTER BOTTOM -->
            </div>
        </div>
    </section>
    <!-- ====== END FOOTER ======  -->

    <!-- ====== JS ======  -->
    <!--jquery-3.3.1 js-->
    <script src="../static/js/jquery-3.3.1.min.js"></script>

    <!-- popper js -->
    <script src="../static/js/popper.min.js"></script>

    <!-- bootstrap js -->
    <script src="../static/js/bootstrap.min.js"></script>

    <!-- scrollIt js -->
    <script src="../static/js/scrollIt.min.js"></script>

    <!-- countTo js -->
    <script src="../static/js/jquery.countTo.js"></script>

    <!-- filter js -->
    <script src="../static/js/jquery.filterizr.min.js"></script>

    <!-- waypoints js -->
    <script src="../static/js/waypoints.min.js"></script>

    <!-- Magnific Popup core JS -->
    <script src="../static/js/jquery.magnific-popup.min.js"></script>

    <!-- owl carousel js -->
    <script src="../static/js/owl.carousel.min.js"></script>

    <!-- validator js -->
    <script src="../static/js/validator.js"></script>

    <!-- coustom js -->
    <script src="../static/js/main.js"></script>


</body>

</html>